<template>
    {{valueArr}}
    <!-- 事件委托 -->
    <form @input="changeInput">
        <div v-for="(item, index) in formArr" :key="index">
            <component :is="item.com" v-bind="item.props" :index="index" :com="item.com" v-model="valueArr[index]"></component>
        </div>
    </form>
    <button v-for="item in buttonArr" :key="item.name" @click="addBtn(item.com, item.props)">添加{{ item.name }}</button>
</template>

<script setup>
import { ref, reactive, markRaw, shallowRef } from 'vue'
let buttonArr = shallowRef([{com: 'input', name: 'input'}])

let { registerForm } = defineProps(['registerForm'])
buttonArr.value = buttonArr.value.concat(registerForm || [])
// 如果整个替换数组用ref，只需要部分替换用reactive
let formArr = reactive([])

function addBtn(com, props) {
    formArr.push({
        com: typeof com === 'string' ? com : markRaw(com),
        props
    })
}
let valueArr = reactive([])
function changeInput(e) {
    let attr = e.target.getAttribute('com')
    let index = e.target.getAttribute('index')
    if(typeof attr === 'string'){
        valueArr[index] = e.target.value
    }
}


</script>
 
<style lang='less' scoped>
    form{
        margin: 20px 0;
        width: 400px;
    }
</style>